<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta charset="utf-8" />
		<title>首页 - 驴妈妈流立方</title>
		<meta name="description" content="overview &amp; stats" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
		<script src="${rc.contextPath}/assets/js/jquery.2.1.1.min.js"></script>
		<script src="${rc.contextPath}/assets/js/bootstrap.min.js"></script>
		<script src="${rc.contextPath}/assets/js/jquery-ui.custom.min.js"></script>
		<script src="${rc.contextPath}/assets/js/jquery.ui.touch-punch.min.js"></script>
		<script src="${rc.contextPath}/assets/js/bootbox.min.js"></script>
		<script src="${rc.contextPath}/assets/js/jquery.gritter.min.js"></script>
		<script src="${rc.contextPath}/assets/js/spin.min.js"></script>
		<!-- ace scripts -->
		<script src="${rc.contextPath}/assets/js/ace-elements.min.js"></script>
		<script src="${rc.contextPath}/assets/js/ace.min.js"></script>
		<!-- validator scripts -->
		<script src="${rc.contextPath}/assets/js/bootstrapValidator.min.js"></script>
		<!-- user scripts -->
		<script src="${rc.contextPath}/assets/js/user/base.js"></script>
		<link rel="stylesheet" href="${rc.contextPath}/assets/css/bootstrap.min.css" />
		<link rel="stylesheet" href="${rc.contextPath}/assets/font-awesome/4.2.0/css/font-awesome.min.css" />
		<!-- page specific plugin styles -->
		<link rel="stylesheet" href="${rc.contextPath}/assets/css/jquery-ui.custom.min.css" />
		<link rel="stylesheet" href="${rc.contextPath}/assets/css/jquery.gritter.min.css" />
		<!-- text fonts -->
		<link rel="stylesheet" href="${rc.contextPath}/assets/fonts/fonts.googleapis.com.css" />
		<!-- BootstrapValidator -->
		<link rel="stylesheet" href="${rc.contextPath}/assets/css/bootstrapValidator.min.css" />
		<!-- ace styles -->
		<link rel="stylesheet" href="${rc.contextPath}/assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />
		<!-- ace settings handler -->
		<script src="${rc.contextPath}/assets/js/ace-extra.min.js"></script>
		<link rel="stylesheet" href="${rc.contextPath}/assets/css/bsie-paginator.css" />

	</head>

	<body class="no-skin" style="background-color: #FFF;">
		<div class="page-content">
			<div class="row">
				<div class="col-xs-12">
					<div class="widget-box">
						<div class="widget-body" style="background-color: #EFF3F8;">
							<div class="widget-main">
								<form class="form-inline" id="searchForm" method="post" action="${rc.contextPath}/performanceStatistics/interfaceShareTrend">
									<input id="chooseTimeVO" type="hidden" name="chooseTimeVO" value="${monitorVO.chooseTimeVO}">
									<input id="chooseTimeTableVO" type="hidden" name="chooseTimeTableVO" value="${monitorVO.chooseTimeTableVO}">
									<input id="minTime" type="hidden" name="minTime" value="${monitorVO.minTime}">
									<input id="maxTime" type="hidden" name="maxTime" value="${monitorVO.maxTime}">
									<input id="pageSizeForm" type="hidden" name="pageSize" value="${monitorVO.pageSize}">
									<input id="timeConsumingType" type="hidden" name="timeConsumingType" value="${monitorVO.timeConsumingType}">
									<div class="form-group">
										<label for="exampleInputName2">选择时段</label> 
										<input type="text" id="config-demo" name="config-demo" class="form-control time" value="${monitorVO.chooseTimeVO}">
											<button id="app_search" type="button"  onclick="replaceDate('1');" class="btn btn-white btn-sm">
												<span class="ace-icon icon-on-right bigger-110"></span>
												过去一周
											</button>
											<button id="app_search" type="button"  onclick="replaceDate('2');" class="btn btn-white btn-sm">
												<span class="ace-icon icon-on-right bigger-110"></span>
												过去两周
											</button>
									</div>
									<div class="form-group">
									  	<button id="search" type="button" onclick="searchClick();" class="btn btn-pink btn-sm">
											<span class="ace-icon fa fa-search icon-on-right bigger-110"></span>
											Search
										</button>
									</div>
								</form>
							</div>
						</div>
					</div>
				</div>
			</div>
			
			<div class="row">
				<div class="col-xs-12">
					<div class="widget-box">
						<div class="widget-header widget-header-small">
							<div class="row">
								<div class="col-xs-12">
									<div id="timeConsumingProportion" style="width: 100%; height: 350px;"></div>
									<div id="businessServicePerformance" style="width: 100%; height: 350px;"></div>
								</div>
							</div>
						</div>
						<div class="row">
							<div class="col-xs-12">
								<div class="widget-header widget-header-small">
									<h5 id="prompt" class="widget-title lighter">平均接口内部耗时5s以上接口信息</h5>
								</div>
								<div style="width: 100%; margin: 0 auto;">
									<table id="simple-table" class="table table-striped table-bordered table-hover" style="margin-bottom: 0px;border-bottom: 0px;">
										<thead id="title">
											<tr>
												<th>序号</th>
												<th>接口名</th>
												<th>平均接口内部耗时(ms)</th>
												<#if monitorVO.timeConsumingType == "totalTimeConsuming">
													<th>平均接口总耗时(ms)</th>
												<#else>
													<th>平均首包时间(ms)</th>
													<th>平均传输时间(ms)</th>
												</#if>
												<th>调用量</th>
												<#if monitorVO.timeConsumingType != "totalTimeConsuming">
													<th>操作</th>
												</#if>
											</tr>
										</thead>
										<tbody id="tableData">
											<#if monitorApiList?? && monitorApiList?size&gt;0>
												<#list monitorApiList as monitorApi>
													<tr class="">
														<td>${monitorApi_index + 1}</td>
														<td>${monitorApi.apiName}</td>
														<td>${monitorApi.avgApiTime!}</td>
														<#if monitorVO.timeConsumingType == "totalTimeConsuming">
															<td>${monitorApi.avgTotalApiTime!}</td>
														<#else>
															<td>${monitorApi.avgFirstPackageTime}</td>
															<td>${monitorApi.avgTransferTime}</td>
														</#if>
														<td>${monitorApi.amount}</td>
														<#if monitorVO.timeConsumingType != "totalTimeConsuming">
															<td><a class = "blue" href = "javascript:void(0);" onclick="actionLine('${monitorApi.apiName}');"><i class = "ace-icon fa fa-search-plus bigger-130"></i></a></td>
														</#if>
													</tr>
												</#list>
											<#else>
												<tr>
													<td colspan="12">
														<div class="alert alert-danger" style="margin-bottom: 0px;" role="alert">没有记录!</div>
													</td>
												</tr>
											</#if>
										</tbody>
									</table>
									<#include "paginatorUpgrade.html">
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			
			<div class="row" id="singleInterface">
				<div class="col-xs-12">
					<div class="col-xs-6" style="padding-left: 2px; padding-right: 2px;">
						<div class="widget-box">
							<div class="widget-body">
								<div class="widget-main">
									<div id="piechart-placeholder" style="width:100%;height:300px;"></div>
								</div>
							</div>
						</div>
					</div>
					
					<div class="col-xs-6" style="padding-left: 2px; padding-right: 2px;">
						<div class="widget-box">
							<div class="widget-body">
								<div class="widget-main">
									<div id="piechart-order" style="width:100%;height:300px;"></div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div id="fillSpace" style="width:100%;height:370px;"></div>
		</div>

		<script src="${rc.contextPath}/assets/js/moment.min.js"></script>
		<script src="${rc.contextPath}/assets/js/bootstrap-datetimepicker.min.js"></script>
		
		<!-- <link rel="stylesheet" href="${rc.contextPath}/stylesheets/bootstrap.min.css"> -->
		<!-- <link rel="stylesheet" href="${rc.contextPath}/stylesheets/bootstrap-theme.min.css"> -->
		<link rel="stylesheet" href="${rc.contextPath}/stylesheets/daterangepicker.css">
		<script type="text/javascript" src="${rc.contextPath}/javascripts/jquery.2.1.1.min.js"></script>
	   	<script type="text/javascript" src="${rc.contextPath}/javascripts/bootstrap.min.js"></script>
	   	<script type="text/javascript" src="${rc.contextPath}/javascripts/moment.js"></script>
	   	<script type="text/javascript" src="${rc.contextPath}/javascripts/daterangepicker.js"></script>
	   	
	   	<script type="text/javascript" src="${rc.contextPath}/javascripts/echarts.js"></script>
	   	<script type="text/javascript" src="${rc.contextPath}/javascripts/china.js"></script>
	   	<script src="${rc.contextPath}/assets/js/jquery.gritter.min.js"></script>
		<script type="text/javascript">
		function replaceDate(obj){
    		if(obj == '1'){
    			startDate = new Date(new Date().getTime()-7*1000*60*60*24);
	    		endDate = new Date(new Date().getTime()-1*1000*60*60*24);
    		}else if(obj == '2'){
    			startDate = new Date(new Date().getTime()-14*1000*60*60*24);
	    		endDate = new Date(new Date().getTime()-1*1000*60*60*24);
    		}
		 	var dateStr = dateFormat(startDate) + " - " + dateFormat(endDate);
		    $("#chooseTimeVO").val(dateStr);
		    $(".time").val(dateStr);
    	}
		
			function dateFormat(date){
	    		var month = date.getMonth() + 1;
    		    var strDate = date.getDate();
    		    if (month >= 1 && month <= 9) {
    		        month = "0" + month;
    		    }
    		    if (strDate >= 0 && strDate <= 9) {
    		        strDate = "0" + strDate;
    		    }
    		    var currentdate = month + "/" + strDate + "/" + date.getFullYear();
    		    return currentdate;
	    	}
			
			
			function searchClick() {
				var chooseTime = $("#config-demo").val();
				var pageSize = $("#pageSize").val();
				$('#pageSizeForm').val(pageSize);
				$('#chooseTimeVO').val(chooseTime);
				$('#chooseTimeTableVO').val(null);
				$('#minTime').val(null);
				$('#maxTime').val(null);
				$("#searchForm").submit();
			}
			
			function actionLine(name){
				$("#singleInterface").css("visibility","visible");
				var chooseTimeVO = $("#chooseTimeVO").val();
				$.ajax({
					url : "${rc.contextPath}/performanceStatistics/actionLine",
					type:'post',
					data : {
						"apiName" : name,
						"chooseTimeVO" : chooseTimeVO
					},
					dataType : "json",
					success : function(data) {
						if(data!=null){
							var series = data.series;
							var legend = data.legend;
							var xAxis = data.dateInterval;
							option1.xAxis.data = xAxis;
							option1.series=series;
							option1.legend.data=legend;
							option2.xAxis.data = xAxis;
							option2.series[0].data=data.cmData;
							option2.series[1].data=data.cuData;
							option2.series[2].data=data.ctData;
							option2.series[3].data=data.noneData;
						 	myChart2.setOption(option1,true);
						 	myChart3.setOption(option2,true);
						}
					}
				});
			}

		
			jQuery(function($) {
				var fillCount = "${fillCount}";
				var height = 37 * fillCount +"px";
				$("#fillSpace").css("height",height);
				$("#singleInterface").css("visibility","hidden");
				$('.time').daterangepicker(
						{
							startDate: new Date(new Date().getTime()-1*1000*60*60*24),
						    endDate: new Date(new Date().getTime()-1*1000*60*60*24),
							showDropdowns : true,
							showWeekNumbers : false,
							timePicker : false,
							timePicker12Hour : false,
							ranges : {
								'昨日': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
				            	'过去7天': [moment().subtract(7, 'days'), moment().subtract(1, 'days')],  
				                '过去31天': [moment().subtract(31, 'days'), moment().subtract(1, 'days')]
							},
							opens : 'right',
							buttonClasses : [ 'btn btn-default' ],
							applyClass : 'btn-small btn-pink blue',
							cancelClass : 'btn-small',
							format : 'yyyy-MM-dd',
							separator : ' to ',
							locale : {
								applyLabel : '确定',
								cancelLabel : '取消',
								fromLabel : '起始时间',
								toLabel : '结束时间',
								customRangeLabel : '自定义',
								daysOfWeek : [ '日', '一', '二', '三', '四', '五',
										'六' ],
								monthNames : [ '一月', '二月', '三月', '四月', '五月',
										'六月', '七月', '八月', '九月', '十月', '十一月',
										'十二月' ],
								firstDay : 1
							}
						},
						function(start, end, label) {//格式化日期显示框  

							$('.time').html(
									start.format('yyyy-MM-dd') + ' - '
											+ end.format('yyyy-MM-dd'));
						});
				
				var chooseTimeVO = "${monitorVO.chooseTimeVO}";
				if(chooseTimeVO != ""){
					$('#config-demo').val(chooseTimeVO);
				}
				
				var chooseTimeTableVO = "${monitorVO.chooseTimeTableVO}";
				var split = chooseTimeTableVO.split("-");
				var minTime = "${monitorVO.minTime}";
				var maxTime = "${monitorVO.maxTime}";
				var timeConsumingType = "${monitorVO.timeConsumingType}";
				if(timeConsumingType == "internalTimeConsuming"){
					timeConsumingType = "平均接口内部耗时";
				}else if(timeConsumingType == "totalTimeConsuming"){
					timeConsumingType = "平均接口总耗时";
				}
				if(chooseTimeTableVO != null && chooseTimeTableVO != ""){
					if(maxTime == null){
						$("#prompt").html(split[0]+timeConsumingType+"5s以上接口信息");
					}else{
						$("#prompt").html(split[0]+timeConsumingType+minTime/1000+"-"+maxTime/1000+"s接口信息");
					}
					
				}else{
					$("#prompt").html(chooseTimeVO+timeConsumingType+"5s以上接口信息");
				}

				
				/* 数值每3位，逗号隔开 */
				function formatNum(strNum) {
					if (strNum.length <= 3) {
						return strNum;
					}
					if (!/^(\+|-)?(\d+)(\.\d+)?$/.test(strNum)) {
						return strNum;
					}
					var a = RegExp.$1, b = RegExp.$2, c = RegExp.$3;
					var re = new RegExp();
					re.compile("(\\d)(\\d{3})(,|$)");
					while (re.test(b)) {
						b = b.replace(re, "$1,$2$3");
					}
					return a + "" + b + "" + c;
				}
				
				option0 = {
		   			    title: {
		   			        text: '接口总耗时占比趋势',
		   			     	subtext: '(首包耗时+传输耗时)'
		   			    },
		   			    tooltip: {
		   			        trigger: 'axis'
		   			    },
		   			    legend: {
		   			        data:['0-1s','1-2s','2-3s','3-5s','5s以上'],
		   			        top : '5%'
		   			    },
		   			 	dataZoom: [
		   			         {
		   			             show: true,
		   			             start: 0,
		   			             end: 100,
		   			         },
		   			         
		   			     ],
		   			    toolbox: {
		   			        show: true,
		   			        feature: {
		   			            dataView: {readOnly: true},
		   			            magicType: {type: ['line', 'bar']},
		   			            restore: {},
		   			            saveAsImage: {}
		   			        }
		   			    },
		   			    xAxis:  {
		   			        type: 'category',
		   			        boundaryGap: false,
		   			        data: []
		   			    },
		   			    yAxis: {
		   			        type: 'value',
		   			        axisLabel: {
		   			            formatter: '{value} %'
		   			        }
		   			    },
		   			    series: [
		   			        {
		   			            name:'0-1s',
		   			            type:'line',
		   			            data:[],

		   			        },
		   			        {
		   			            name:'1-2s',
		   			            type:'line',
		   			            data:[],
		   			        },
		   			        {
		   			            name:'2-3s',
		   			            type:'line',
		   			            data:[],

		   			        },
		   			        {
		   			            name:'3-5s',
		   			            type:'line',
		   			            data:[],
		   			        },
		   			        {
		   			            name:'5s以上',
		   			            type:'line',
		   			            data:[],

		   			        }
		   			    ]
		   			};
				
		 		option = {
		   			    title: {
		   			        text: '接口内部耗时占比趋势'
		   			    },
		   			    tooltip: {
		   			        trigger: 'axis'
		   			    },
		   			    legend: {
		   			        data:['0-1s','1-2s','2-3s','3-5s','5s以上'],
		   			        top : '5%'
		   			    },
		   			 	dataZoom: [
			   			         {
			   			             show: true,
			   			             start: 0,
			   			             end: 100,
			   			         },
			   			         
			   			     ],
		   			    toolbox: {
		   			        show: true,
		   			        feature: {
		   			           /* 
		   			                //区域放大，缩小
		   			                dataZoom: {
		   			                yAxisIndex: 'none'
		   			            }, */  
		   			            dataView: {readOnly: true},
		   			            magicType: {type: ['line', 'bar']},
		   			            restore: {},
		   			            saveAsImage: {}
		   			        }
		   			    },
		   			    xAxis:  {
		   			        type: 'category',
		   			        boundaryGap: false,
		   			        data: []
		   			    },
		   			    yAxis: {
		   			        type: 'value',
		   			        axisLabel: {
		   			            formatter: '{value} %'
		   			        }
		   			    },
		   			    series: [
		   			        {
		   			            name:'0-1s',
		   			            type:'line',
		   			            data:[],

		   			        },
		   			        {
		   			            name:'1-2s',
		   			            type:'line',
		   			            data:[],
		   			        },
		   			        {
		   			            name:'2-3s',
		   			            type:'line',
		   			            data:[],

		   			        },
		   			        {
		   			            name:'3-5s',
		   			            type:'line',
		   			            data:[],
		   			        },
		   			        {
		   			            name:'5s以上',
		   			            type:'line',
		   			            data:[],

		   			        }
		   			    ]
		   			};
		 		
		 		
		 		option1 = {
		   			    title: {
		   			        text: '单个接口不同版本调用耗时',
		   			        left : 'center'
		   			    },
		   			    tooltip: {
		   			        trigger: 'axis'
		   			    },
		   			    legend: {
		   			        data:['V1','V2','V3','V4','V5'],
		   			        top : '10%'
		   			    },
		   			 	dataZoom: [
		   			         {
		   			             show: true,
		   			             start: 0,
		   			             end: 100,
		   			         },
		   			         
		   			     ],
		   			    toolbox: {
		   			        show: true,
		   			        feature: {
		   			        	/* 
	   			                //区域放大，缩小
	   			                dataZoom: {
	   			                yAxisIndex: 'none'
	   			            }, */  
		   			            dataView: {readOnly: true},
		   			            magicType: {type: ['line', 'bar']},
		   			            restore: {},
		   			            saveAsImage: {}
		   			        }
		   			    },
		   			    xAxis:  {
		   			        type: 'category',
		   			        boundaryGap: false,
		   			        data: []
		   			    },
		   			    yAxis: {
		   			        type: 'value',
		   			        axisLabel: {
		   			            formatter: '{value} ms'
		   			        }
		   			    },
		   			    series: []
		   			};
		 		
		 		
		 		option2 = {
		   			    title: {
		   			        text: '单个接口运营商调用耗时',
		   			        left: "center"
		   			    },
		   			    tooltip: {
		   			        trigger: 'axis'
		   			    },
		   			    legend: {
		   			        data:['移动','联通','电信','其它'],
		   			        top : "10%"
		   			    },
		   			    toolbox: {
		   			        show: true,
		   			        feature: {
		   			        	/* 
	   			                //区域放大，缩小
	   			                dataZoom: {
	   			                yAxisIndex: 'none'
	   			            }, */  
		   			            dataView: {readOnly: true},
		   			            magicType: {type: ['line', 'bar']},
		   			            restore: {},
		   			            saveAsImage: {}
		   			        }
		   			    },
		   			 	dataZoom: [
		   			         {
		   			             show: true,
		   			             start: 0,
		   			             end: 100,
		   			         },
		   			     ],
		   			    xAxis:  {
		   			        type: 'category',
		   			        boundaryGap: false,
		   			        data: []
		   			    },
		   			    yAxis: {
		   			        type: 'value',
		   			        axisLabel: {
		   			            formatter: '{value} ms'
		   			        }
		   			    },
		   			    series: [
		   			        {
		   			            name:'移动',
		   			            type:'line',
		   			            data:[],

		   			        },
		   			        {
		   			            name:'联通',
		   			            type:'line',
		   			            data:[],
		   			        },
		   			        {
		   			            name:'电信',
		   			            type:'line',
		   			            data:[],

		   			        },
		   			        {
		   			            name:'其它',
		   			            type:'line',
		   			            data:[],
		   			        }
		   			    ]
		   			};
				
		 		var monitorAPIJsonXAxis = eval('${monitorAPIJsonXAxis!}');
		 		var monitorAPIJsonProportion1 = eval('${monitorAPIJsonProportion1!}');
		 		var monitorAPIJsonProportion2 = eval('${monitorAPIJsonProportion2!}');
		 		var monitorAPIJsonProportion3 = eval('${monitorAPIJsonProportion3!}');
		 		var monitorAPIJsonProportion4 = eval('${monitorAPIJsonProportion4!}');
		 		var monitorAPIJsonProportion5 = eval('${monitorAPIJsonProportion5!}');
		 		
		 		var monitorAPIJsontimeConsuming1 = eval('${monitorAPIJsontimeConsuming1!}');
		 		var monitorAPIJsontimeConsuming2 = eval('${monitorAPIJsontimeConsuming2!}');
		 		var monitorAPIJsontimeConsuming3 = eval('${monitorAPIJsontimeConsuming3!}');
		 		var monitorAPIJsontimeConsuming4 = eval('${monitorAPIJsontimeConsuming4!}');
		 		var monitorAPIJsontimeConsuming5 = eval('${monitorAPIJsontimeConsuming5!}');
				
		 		myChart0 = echarts.init(document.getElementById('timeConsumingProportion'));
				myChart1 = echarts.init(document.getElementById('businessServicePerformance'));
				myChart2 = echarts.init(document.getElementById('piechart-placeholder'));
				myChart3 = echarts.init(document.getElementById('piechart-order'));
				option.xAxis.data = monitorAPIJsonXAxis;
				option.series[0].data=monitorAPIJsonProportion1;
				option.series[1].data=monitorAPIJsonProportion2;
				option.series[2].data=monitorAPIJsonProportion3;
				option.series[3].data=monitorAPIJsonProportion4;
				option.series[4].data=monitorAPIJsonProportion5;
				
				option0.xAxis.data = monitorAPIJsonXAxis;
				option0.series[0].data=monitorAPIJsontimeConsuming1;
				option0.series[1].data=monitorAPIJsontimeConsuming2;
				option0.series[2].data=monitorAPIJsontimeConsuming3;
				option0.series[3].data=monitorAPIJsontimeConsuming4;
				option0.series[4].data=monitorAPIJsontimeConsuming5;
				myChart0.setOption(option0,true);
			 	myChart1.setOption(option,true);
			 	myChart2.setOption(option1,true);
			 	myChart3.setOption(option2,true);
			 	
			 	myChart0.on('click', function (params) {
			 		var pageSize = $("#pageSizeForm").val();
			 		$("#timeConsumingType").val("totalTimeConsuming");
			 		$.ajax({
						url : "${rc.contextPath}/performanceStatistics/ajaxTable",
						type:'post',
						data : {
							"chooseTimeVO" : params.name,
							"seriesIndex" : params.seriesIndex,
							"page" : 1,
							"pageSize" : pageSize,
							"timeConsumingType" : "totalTimeConsuming"
						},
						dataType : "json",
						success : function(data) {
							if(data!=null){
								$("#singleInterface").css("visibility","hidden");
								var page = data.page;
								var monitorApiList = data.monitorApiList;
								var monitorVO = data.monitorVO;
								var chooseTimeTableVO = data.monitorVO.chooseTimeTableVO;
								var minTime = data.monitorVO.minTime;
								var maxTime = data.monitorVO.maxTime;
								var split = chooseTimeTableVO.split("-");
								if(chooseTimeTableVO != null && chooseTimeTableVO != ""){
									if(maxTime == null){
										$("#prompt").html(split[0]+"平均接口总耗时5s以上接口信息");
									}else{
										$("#prompt").html(split[0]+"平均接口总耗时"+minTime/1000+"-"+maxTime/1000+"s接口信息");
									}
									
								}else{
									$("#prompt").html(chooseTimeVO+"平均接口总耗时5s以上接口信息");
								}
								$("#chooseTimeTableVO").val(chooseTimeTableVO);
								$("#minTime").val(minTime);
								$("#maxTime").val(maxTime);
								$(".ui-pg-input").val(page.pageNum);
								$("#sp_1_grid-pager").html(page.pages);
								var val = 'Page Size:<input id="pageSize" class="ui-pg-input" type="text" size="2" maxlength="7" value="'+page.pageSize+'"  role="textbox">&nbsp;'
									+'View '+page.startRow+' - '+page.endRow+' of '+page.total;
								$(".ui-paging-info").html(val);
								$("#first_grid-pager").attr("onclick","showPage("+page.firstPage+",this)");
								$("#prev_grid-pager").attr("onclick","showPage("+page.prePage+",this)");
								$("#next_grid-pager").attr("onclick","showPage("+page.nextPage+",this)");
								$("#last_grid-pager").attr("onclick","showPage("+page.lastPage+",this)");
								$("#title").html("<tr><th>序号</th><th>接口名</th><th>平均接口内部耗时(ms)</th><th>平均接口总耗时(ms)</th><th>调用量</th></tr>");
								if(monitorApiList != null){
									var html = '';
									for(var i=0;i<monitorApiList.length;i++){
										var index = i+1;
										var apiName = monitorApiList[i].apiName;
										var avgApiTime = monitorApiList[i].avgApiTime;
										var avgTotalApiTime = monitorApiList[i].avgTotalApiTime;
										var amount = monitorApiList[i].amount;
										html += '<tr class=""><td>'+index+'</td><td>'+apiName+'</td><td>'+avgApiTime+
												'</td><td>'+avgTotalApiTime+'</td><td>'+amount+'</td></tr>';
									} 
									$("#tableData").html(html);
								}else{
									var html = '<tr><td colspan="12"><div class="alert alert-danger" style="margin-bottom: 0px;" role="alert">没有记录!</div></td></tr>';
									$("#tableData").html(html);
								}
								
							}
						}
					});
			 	});
			 	
			 	myChart1.on('click', function (params) {
			 		var pageSize = $("#pageSizeForm").val();
			 		$("#timeConsumingType").val("internalTimeConsuming");
			 		$.ajax({
						url : "${rc.contextPath}/performanceStatistics/ajaxTable",
						type:'post',
						data : {
							"chooseTimeVO" : params.name,
							"seriesIndex" : params.seriesIndex,
							"page" : 1,
							"pageSize" : pageSize,
							"timeConsumingType" : "internalTimeConsuming"
						},
						dataType : "json",
						success : function(data) {
							if(data!=null){
								$("#singleInterface").css("visibility","hidden");
								var page = data.page;
								var monitorApiList = data.monitorApiList;
								var monitorVO = data.monitorVO;
								var chooseTimeTableVO = data.monitorVO.chooseTimeTableVO;
								var minTime = data.monitorVO.minTime;
								var maxTime = data.monitorVO.maxTime;
								var split = chooseTimeTableVO.split("-");
								if(chooseTimeTableVO != null && chooseTimeTableVO != ""){
									if(maxTime == null){
										$("#prompt").html(split[0]+"平均接口内部耗时5s以上接口信息");
									}else{
										$("#prompt").html(split[0]+"平均接口内部耗时"+minTime/1000+"-"+maxTime/1000+"s接口信息");
									}
									
								}else{
									$("#prompt").html(chooseTimeVO+"平均接口内部耗时5s以上接口信息");
								}
								$("#chooseTimeTableVO").val(chooseTimeTableVO);
								$("#minTime").val(minTime);
								$("#maxTime").val(maxTime);
								$(".ui-pg-input").val(page.pageNum);
								$("#sp_1_grid-pager").html(page.pages);
								var val = 'Page Size:<input id="pageSize" class="ui-pg-input" type="text" size="2" maxlength="7" value="'+page.pageSize+'"  role="textbox">&nbsp;'
									+'View '+page.startRow+' - '+page.endRow+' of '+page.total;
								$(".ui-paging-info").html(val);
								$("#first_grid-pager").attr("onclick","showPage("+page.firstPage+",this)");
								$("#prev_grid-pager").attr("onclick","showPage("+page.prePage+",this)");
								$("#next_grid-pager").attr("onclick","showPage("+page.nextPage+",this)");
								$("#last_grid-pager").attr("onclick","showPage("+page.lastPage+",this)");
								$("#title").html("<tr><th>序号</th><th>接口名</th><th>平均接口内部耗时(ms)</th><th>平均首包时间(ms)</th><th>平均传输时间(ms)</th><th>调用量</th><th>操作</th></tr>");
								if(monitorApiList != null){
									var html = '';
									for(var i=0;i<monitorApiList.length;i++){
										var index = i+1;
										var apiName = monitorApiList[i].apiName;
										var avgApiTime = monitorApiList[i].avgApiTime;
										var avgFirstPackageTime = monitorApiList[i].avgFirstPackageTime;
										var avgTransferTime = monitorApiList[i].avgTransferTime;
										var amount = monitorApiList[i].amount;
										html += '<tr class=""><td>'+index+'</td><td>'+apiName+'</td><td>'+avgApiTime+
												'</td><td>'+avgFirstPackageTime+'</td><td>'+avgTransferTime+'</td><td>'+
												amount+'</td><td><a class = "blue" href = "javascript:void(0);" onclick="actionLine(\''+apiName+'\');"><i class = "ace-icon fa fa-search-plus bigger-130"></i></a></td></tr>';
									} 
									$("#tableData").html(html);
								}else{
									var html = '<tr><td colspan="12"><div class="alert alert-danger" style="margin-bottom: 0px;" role="alert">没有记录!</div></td></tr>';
									$("#tableData").html(html);
								}
								
							}
						}
					});
			 	});
		  	  	window.onresize = function(){
		  	  		myChart0.resize();
	  	  	  		myChart1.resize();
	  	  	  	    myChart2.resize();
	  	  	        myChart3.resize();
		  	  	} 

			})
			
			
		</script>


		<link rel="stylesheet" href="${rc.contextPath}/assets/css/bootstrap.css" /> 
		<script src="${rc.contextPath}/assets/js/chosen.jquery.js"></script>
		
		<script>
			 $(function() {
		        $('.chosen-select').chosen();
		       	$('.chosen-select-deselect').chosen({ allow_single_deselect: true });
		     }); 
	      	
			 function statistics(){
				$('#statistics').show();
				$('.chosen-select').chosen("destroy").chosen();
		       	$('.chosen-select-deselect').chosen({ allow_single_deselect: true });
			 }
	    </script>
	    
	</body>
</html>